<!--
 * @Author: 王晓崧
 * @Date: 2022-07-06 10:42:11
 * @LastEditTime: 2022-07-07 09:25:04
 * @FilePath: \Client\src\views\home\home.vue
 * @Description: 
 * 
-->
<template>
  <div>
    <div class="top_div">
      <div class="navigationBar">
        <div class="tag_div">
          <a-image src="https://s1.ax1x.com/2022/07/14/jfSg76.md.png" class="tag" :preview="false"
                   @click="toIndex"></a-image>
        </div>
        <div class="menu_div">
          <!--          todo 导航栏选中首页bug更新到3.2.10后未修复-->
          <a-menu v-model:selectedKeys="current" mode="horizontal" class="menu_top">
            <a-menu-item @click="toIndex" :key="0">首页</a-menu-item>
            <a-menu-item @click="toStudy" :key="1">学习</a-menu-item>
            <a-menu-item @click="toFood" :key="2">美食</a-menu-item>
            <a-menu-item @click="toIdle" :key="3">闲置</a-menu-item>
            <a-menu-item @click="toMyActivity" :key="4">活动</a-menu-item>
            <a-menu-item @click="toFun" :key="5">灌水</a-menu-item>
          </a-menu>
        </div>
        <a-button type="text" @click="toPost">发帖</a-button>
        <div class="search_div">
          <a-input-search v-model:value="searchQuery.s" placeholder="input search text"
                          style="width: 350px;border-radius: 10px;" @search="onSearch"/>
        </div>
        <div
            class="logo"
            style="float: right; margin-left: 10px"
            @click="selectPath('/user/mainview')"
        >
          <a-dropdown v-if="getLocalToken()" style="height:100%">
            <a href="/likeMsg">
              <a-badge :count="allmsg">
                <bell-outlined/>
              </a-badge>
            </a>
            <template #overlay>
              <a-menu>

                <a-menu-item v-for="menu in msgNum" :key="menu.key">
                  <a :href="menu.path"
                  >{{ menu.value }}
                    <a-badge :count="menu.num"
                    />
                  </a>
                </a-menu-item>
              </a-menu>
            </template>
          </a-dropdown>
        </div>
        <div class="login_div">
          <div v-if="isLogin===null">
            <a-button type="primary" style="border-radius: 10px;" @click="tologin">
              去登录
            </a-button>
          </div>
          <div v-else>
            <a-dropdown :placement="bottomRight" :trigger="['click']">
              <a @click.prevent>
                <span>
                  <a-badge dot>
                    <a-avatar shape="square">
                      <template #icon>
                        <a-image style="border-radius: 10px;" :src="'/api/assets/avatar/'+isLogin.u_avatar"
                                 :preview="false"></a-image>
                      </template>
                    </a-avatar>
                  </a-badge>
                </span>
                <DownOutlined/>
              </a>
              <template #overlay>
                <a-menu style="margin-top:5px;">
                  <a-menu-item key="0" @click="routeTo('/user/'+isLogin.u_account)">我的主页</a-menu-item>
                  <a-menu-divider/>
                  <a-menu-item key="1" @click="toBill">积分账单</a-menu-item>
                  <a-menu-divider/>
                  <a-menu-item key="2">角色切换</a-menu-item>
                  <a-menu-divider/>
                  <a-menu-item key="3" @click="quit">退出</a-menu-item>
                </a-menu>
              </template>
            </a-dropdown>
          </div>
        </div>
      </div>
    </div>

    <div class="home_center">
      <router-view></router-view>
    </div>

  </div>


</template>

<script>
import {useRouter} from "vue-router";
import {EventSourcePolyfill} from 'event-source-polyfill';
import {getLocalToken, removeLocalToken, get} from '@/common';
import {ref, reactive} from 'vue';
import {BellOutlined} from "@ant-design/icons-vue";

export default {
  components: {
    BellOutlined
  },
  setup() {
    const current = ref(['0']);

    const router = useRouter(); //获取路由器

    const toIndex = () => {
      router.push({path: "/index"});
    }

    const toStudy = () => {
      router.push({path: "/study"});
    }

    const toFood = () => {
      router.push({path: "/food"});
    }

    const toIdle = () => {
      router.push({path: "/idle"});
    }

    const toMyActivity = () => {
      router.push({path: "/activity"});
    }

    const toFun = () => {
      router.push({path: "/fun"});
    }

    const toBill = () => {
      router.push({path: "/bill"});
    }

    const toPost = () => {
      router.push({path: "/post"});
    }


    //进入登录页面的按钮
    const tologin = () => {
      router.push({path: "/login"});
    }

    const routeTo = (_path) => {
      router.push({path: _path});
    }

    const isLogin = ref({});

    const ch = () => {
      get("/test/security").then((res) => {
        isLogin.value = res.data;
      })
          .catch((err) => {
          });
    }
    ch();
    const quit = () => {
      removeLocalToken();
      location.reload();
    }

    const searchQuery = reactive({
      s: null,
    })

    const onSearch = () => {
      router.push({
        path: '/searchResult',
        query: {searchStr: searchQuery.s}
      })
    }

    const msgNum = ref([
      {
        key: 1,
        value: "点赞我的",
        path: '/likeMsg',
        num: 0
      },
      {
        key: 2,
        value: "评论我的",
        path: '/commentMsg',
        num: 0
      },
      {
        key: 3,
        value: "回复我的",
        path: '/replyMsg',
        num: 0
      },
      {
        key: 4,
        value: "我的消息",
        path: '/chat',
        num: 0
      },
      {
        key: 5,
        value: "收藏我的",
        path: '/collectMsg',
        num: 0
      },
      {
        key: 6,
        value: "关注我的",
        path: '/followMsg',
        num: 0
      },
      {
        key: 7,
        value: "审核结果",
        path: '/postCheckMsg',
        num: 0
      },
      {
        key: 8,
        value: "举报结果",
        path: '/reportMsg',
        num: 0
      },
    ])

    const allmsg = ref(0)

    const getMegNum = () => {
      get("/message/unread").then((res) => {
        allmsg.value = 0
        for (let i = 0; i < 8; i++) {
          msgNum.value[i].num = res.data[i]
          allmsg.value += res.data[i]
        }
        console.log(msgNum.value)
      })
    }

    getMegNum()
    console.log(msgNum.value)
// 实时消息，勿改！！！
    const eventSource = new EventSourcePolyfill('/api/message/subscribe', {
      headers: {
        'X-Custom-Header': 'value',
        'Token': getLocalToken()
      }
    });

    eventSource.onmessage = (event) => {
      console.log(event);
      getMegNum()
    };


    return {
      current,
      router,
      toIndex,
      toStudy,
      toFood,
      toIdle,
      toMyActivity,
      toFun,
      tologin,
      isLogin,
      onSearch,
      searchQuery,
      routeTo,
      quit,
      toBill,
      getMegNum,
      msgNum,
      allmsg,
      eventSource,
      getLocalToken,
      toPost
    }
  }
}

</script>

<style>
body {
  background: url("https://s1.ax1x.com/2022/07/16/j5ic80.md.png") no-repeat;
  background-size: 100% 100%;
  background-attachment: fixed;
}

.top_div {
  display: flex;
  justify-content: center;
  align-items: center;
  box-shadow: 0 5px 10px -10px gray;
  background-color: rgb(255, 255, 255);
}


.navigationBar {
  line-height: 60px;
  border: 5px;
  min-width: 1156px;
}

.tag_div {
  height: 60px;
  float: left;
  width: 200px;
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow-x: hidden;
}

.tag {
  height: 40px;
}

.menu_div {
  float: left;
  height: 60px;
  overflow-x: hidden;

}

.menu_top {
  height: 60px;
  display: flex;
  align-items: center;
  border: none;
}

.search_div {
  height: 60px;
  width: 400px;
  float: left;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow-x: hidden;
}

.login_div {
  width: 100px;
  height: 60px;
  float: left;
  display: flex;
  align-items: center;
  justify-content: center;
}

.home_center {
  width: 70%;
  min-height: 500px;
  vertical-align: middle;
  margin-top: 10px;
  position: relative;
  margin-right: 15%;
  margin-left: 15%;
  min-width: 1156px;
}

</style>

